<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>所有商品</title>
  <link href="../mall/image/迪.png"rel="shortcut icon"type="image/x-icon">
  <link rel="stylesheet" type="text/css" th:href="@{/admin/element-ui/lib/theme-chalk/index.css}">
  <link rel="stylesheet" type="text/css" th:href="@{/admin/fontawesome/fontawesome/font-awesome.min.css}">
  <style>
    [class^="el-icon-fa"], [class*=" el-icon-fa"] {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome !important;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    ::-webkit-scrollbar-track {
      width: 6px;
      background: none;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, .5);
      background-clip: padding-box;
      min-height: 28px;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
      transition: background-color .3s;
      cursor: pointer;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(144, 147, 153, .3);
    }

    /* 搜索框 */
    .el-select .el-input {
      width: 130px;
    }

    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    textarea {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--  搜索框  -->
    <div style="margin-top: 15px;margin-bottom: 15px;">
      <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="编号" value="goods_id"></el-option>
          <el-option label="名称" value="goods_name"></el-option>
          <el-option label="描述" value="goods_intro"></el-option>
          <el-option label="创建用户" value="crete_user"></el-option>
          <el-option label="变更用户" value="update_user"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchGoods"></el-button>
      </el-input>
    </div>

    <!-- 添加/删除 -->
    <div style="margin-top: 15px;margin-bottom: 15px;text-align: center">
      <el-popover
          placement="top"
          width="150"
          trigger="hover">
        <div style="text-align: center">
          <p style="font-size: 15px; color: #409eff"><b>添加商品</b></p>
        </div>
        <el-button @click="openDrawer('添加商品')" slot="reference" icon="el-icon-plus" type="primary" circle></el-button>
      </el-popover>

      <el-popover
          placement="top"
          width="150"
          trigger="hover">
        <div style="text-align: center">
          <p style="font-size: 15px; color: #f56c6c"><b>删除选中商品</b></p>
        </div>
        <el-button slot="reference"
                   @click="deleteGoodsReview"
                   icon="el-icon-delete"
                   type="danger" circle></el-button>
      </el-popover>


      <el-popover
          placement="top"
          width="150"
          trigger="hover">
        <div style="text-align: center">
          <p style="font-size: 15px;"><b>将选中商品上架</b></p>
        </div>
        <el-button slot="reference"
                   @click="startSellSelectGoods"
                   icon="el-icon-sell" circle></el-button>
      </el-popover>

      <el-popover
          placement="top"
          width="150"
          trigger="hover">
        <div style="text-align: center">
          <p style="font-size: 15px;"><b>将选中商品下架</b></p>
        </div>
        <el-button slot="reference"
                   @click="stopSellSelectGoods"
                   icon="el-icon-sold-out" circle></el-button>
      </el-popover>

      <el-popover
          placement="top"
          width="150"
          trigger="hover">
        <div style="text-align: center">
          <p style="font-size: 15px;"><b>重置筛选</b></p>
        </div>
        <el-button slot="reference"
                   @click="getGoodsInfoByPage(1,10)"
                   icon="el-icon-refresh" circle></el-button>
      </el-popover>


    </div>

    <template>
      <el-table
          :data="tableData"
          border
          ref="multipleTable"
          max-height="645"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          style="width: 100%; height: 100%">
        <el-table-column
            type="selection"
            width="55">

        </el-table-column>
        <el-table-column
            fixed
            prop="goodsId"
            label="编号"
            align="center"
            width="150">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="名称"
            align="center"

            width="300">
        </el-table-column>
        <el-table-column
            prop="goodsIntro"
            label="描述"
            align="center"
            width="200">
        </el-table-column>

        <el-table-column
            prop="goodsCoverImg"
            label="图片"
            align="center"
            width="120">
          <template slot-scope="scope">
            <div v-html="scope.row.goodsCoverImg"></div>
          </template>
        </el-table-column>

        <el-table-column
            prop="stockNum"
            label="库存"
            align="center"
            width="120">
        </el-table-column>

        <el-table-column
            prop="originalPrice"
            label="商品价格"
            align="center"
            width="120">
        </el-table-column>

        <el-table-column
            prop="sellingPrice"
            label="商城售价"
            align="center"
            width="120">
        </el-table-column>

        <el-table-column
            prop="goodsSellStatus"
            label="状态"
            align="center"
            width="120">
          <template slot-scope="scope">
            <el-popover
                placement="right"
                width="150"
                trigger="hover">
              <div style="text-align: center">
                <p v-if="!scope.row.goodsSellStatus" style="font-size: 15px; color: #dcdfe6"><b>停售</b></p>
                <p v-if="scope.row.goodsSellStatus" style="font-size: 15px; color: #13ce66"><b>在售</b></p>
              </div>
              <el-switch
                  slot="reference"
                  style="display: block; margin-top: 10px; margin-bottom: 10px"
                  v-model="scope.row.goodsSellStatus"
                  active-color="#13ce66"
                  inactive-color="#DCDFE6"
                  @change="changeSwitch(scope.row)"
              >
              </el-switch>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            width="200">
        </el-table-column>

        <el-table-column
            label="创建用户"
            align="center"
            width="200">
          <div style="margin-top: 10px;margin-bottom: 10px">
            <el-card shadow="hover">
              创建用户
            </el-card>
          </div>
        </el-table-column>

        <el-table-column
            prop="updateTime"
            label="变更时间"
            align="center"
            width="200">
        </el-table-column>

        <el-table-column
            label="变更用户"
            align="center"
            width="200">
          <div style="margin-top: 10px;margin-bottom: 10px">
            <el-card shadow="hover">
              变更用户
            </el-card>
          </div>
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="140">
          <template slot-scope="scope">
            <el-popover
                placement="top"
                width="150"
                trigger="hover">
              <div style="text-align: center">
                <p style="font-size: 15px; color: #409eff"><b>编辑</b></p>
              </div>
              <el-button slot="reference"
                         type="primary"
                         @click="openEditDrawer('编辑商品',scope.row)"
                         icon="el-icon-edit"
                         size="medium" circle></el-button>
            </el-popover>

            <el-popover
                placement="top"
                width="150"
                trigger="hover">
              <div style="text-align: center">
                <p style="font-size: 15px; color:#f56c6c"><b>删除</b></p>
              </div>
              <el-button
                  @click="deleteGoods(scope.row)"
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  size="medium"
                  circle></el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--
              分页工具条
       -->
      <div style="width: 100%;text-align: center">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

      <!--
          抽屉, 添加商品
       -->
      <el-drawer
          :title="drawerOperation"
          :show-close="false"
          size="45%"
          :visible.sync="drawer"
          :direction="direction">

        <!-- 表单 -->
        <el-form ref="addGoodsForm"
                 style="margin-left: 15px"
                 :rules="addGoodsFormRules"
                 :model="addGoodsForm"
                 label-width="80px">

          <el-form-item
              prop="goodsId"
              label="商品编号">
            <el-input
                v-model="addGoodsForm.goodsId"
                :disabled="true">
            </el-input>
          </el-form-item>


          <el-form-item
              prop="goodsCategoryId"
              label="商品类型">
            <!--    级联选择器        -->
            <el-cascader style="width: 95%"
                         v-model="addGoodsForm.goodsCategoryId"
                         placeholder="搜索或手动选择"
                         :props="{ expandTrigger: 'hover' }"
                         :options="options"
                         filterable>
            </el-cascader>
          </el-form-item>

          <el-form-item
              prop="goodsName"
              label="商品名称">
            <el-input v-model="addGoodsForm.goodsName" style="width: 95%"></el-input>
          </el-form-item>

          <el-form-item
              prop="goodsIntro"
              label="商品简介">
            <el-input type="textarea"
                      v-model="addGoodsForm.goodsIntro"
                      maxlength="100"
                      show-word-limit
                      style="width: 95%;"
            ></el-input>
          </el-form-item>

          <el-form-item
              label="商品价格"
              prop="originalPrice">
            <el-input
                placeholder="输入商品原价格"
                prefix-icon="el-icon-fa-rmb"
                @change="originalPriceChange"
                v-model.number="addGoodsForm.originalPrice"
                style="width: 40%">
            </el-input>
          </el-form-item>

          <el-form-item label="商城售价">
            <template>
              <div class="block" style="width: 95%; margin-bottom: 15px">
                <el-slider
                    :marks="marks"
                    :max.number="sellingPriceMax"
                    :show-tooltip="false"
                    v-model="addGoodsForm.sellingPrice"
                    show-input>
                </el-slider>
              </div>
            </template>
          </el-form-item>

          <el-form-item
              prop="stockNum"
              label="库存数">
            <el-input v-model.number="addGoodsForm.stockNum" style="width: 40%"></el-input>
          </el-form-item>

          <el-form-item label="商品标签">
            <el-input v-model="addGoodsForm.tag" style="width: 40%"></el-input>
          </el-form-item>

          <el-form-item label="商品图片">
            <el-upload
                class="upload-demo"
                action="/admin/goods/upload/img"
                name="goodsCoverImg"
                v-model="addGoodsForm.goodsCoverImg"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleAvatarSuccess"
                multiple
                style="width: 40%"
            >
              <el-button
                  icon="el-icon-fa-upload"
                  size="small"
                  type="primary">点击上传
              </el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="是否上架">
            <el-switch
                v-model="addGoodsForm.goodsSellStatus"
                active-color="#13ce66"
                inactive-color="#DCDFE6">
            </el-switch>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit('addGoodsForm')">确定</el-button>
            <el-button @click="resetForm('addGoodsForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>


      <!-- Dialog: 批量删除数据回显以及确认操作 -->
      <el-dialog title="确定删除以下商品?"
                 :center="true"
                 :visible.sync="dialogTableVisible">
        <el-table
            :border="false"
            :stripe="true"
            max-height="400"
            :data="dialogTableData">
          <el-table-column
              align="center"
              property="goodsId"
              label="编号"
              width="250">

          </el-table-column>

          <el-table-column
              align="center"
              property="goodsName"
              label="名称"
              width="250">
          </el-table-column>

          <el-table-column
              align="center"
              property="goodsIntro"
              label="描述"
              width="250">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="deleteGoodsByIds">确 定</el-button>
          <el-button @click="dialogTableVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
  <script th:src="@{/admin/dateformat.js}"></script>
  <script th:src="@{/admin/vue.js}"></script>
  <script th:src="@{/admin/element-ui/lib/index.js}"></script>
  <script th:src="@{/admin/jquery-3.3.1.min.js}"></script>
  <script>


    new Vue({
      el: "#app",

      /*
          数据 --------------------------
      */
      data() {
        return {
          /* 表格数据 */
          tableData: [],

          /* 分页工具条参数 */
          currentPage: 1,
          total: 100,

          /* 搜索框参数 */
          input: '',
          select: '',

          /* 抽屉参数  */
          drawer: false,
          direction: 'rtl',


          /* 表单数据(添加商品)  */
          addGoodsForm: {
            goodsName: '',
            goodsIntro: '',
            goodsCategoryId: '',
            goodsCoverImg: '',
            originalPrice: 0,
            sellingPrice: 100,
            stockNum: '',
            tag: '',
            goodsSellStatus: false,
          },

          /* 添加商品表单验证规则 */
          addGoodsFormRules: {
            goodsCategoryId: [
              {required: true, message: '请选择分类', trigger: 'change'},
            ],
            goodsName: [
              {required: true, message: '名称必填', trigger: 'change'},
            ],
            goodsIntro: [
              {required: true, message: '简介必填', trigger: 'blur'},
            ],
            originalPrice: [
              {required: true, message: '请输入商品价格', trigger: 'blur'},
              {type: 'number', message: '请输入数字', trigger: 'blur'}
            ],
            stockNum: [
              {type: 'number', message: '请输入数字', trigger: 'blur'}
            ]
          },

          drawerOperation : '',


          /* 级联选择器数据 */
          options: [],

          /* 图片上传参数 */
          imageUrl: '',

          /* 商城售价滑块默认值 */
          sellingPriceMax: 100,

          /* 添加商品: 商城售价滑块标记点 */
          marks: {
            0: '骨折',
            10: '一折',
            20: '二折',
            30: '三折',
            40: '四折',
            50: '五折',
            60: '六折',
            70: '七折',
            80: '八折',
            90: '九折',
            100: '',
          },

          /* 批量删除对话框中表格数据 */
          dialogTableData: [],

          /* 批量删除对话框参数 */
          dialogTableVisible: false,

        }
      },

      /*
              方法 -------------------
       */
      methods: {
        /* 忘了是什么方法 */
        handleClick(row) {
          console.log(row);
        },

        /* 分页工具条方法 */
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.getGoodsInfoByPage(val, 10)
          console.log(`当前页: ${val}`);
        },

        /* 发送分页查询请求 */
        getGoodsInfoByPage(currentPage, pageSize) {
          var _this = this;
          $.ajax({
            url: "/admin/goods/" + currentPage + '/' + pageSize,
            type: "GET",
            success: function (resp) {
              const records = resp.records;
              for (let i = 0; i < records.length; i++) {
                // records[i].goodsCoverImg = '<img th:src="../../img/' + img + '" alt="" style="width: 90px; height: 90px; border-radius: 8px">'
                records[i].goodsCoverImg = '<img src="/admin' + records[i].goodsCoverImg + '" alt="" style="width: 90px; height: 90px; border-radius: 8px">';
                records[i].createTime = DateFormat.format(new Date(records[i].createTime), 'yyyy-MM-dd hh:mm:ss');
                records[i].updateTime = DateFormat.format(new Date(records[i].updateTime), 'yyyy-MM-dd hh:mm:ss');
                if (records[i].goodsSellStatus == 1) {
                  records[i].goodsSellStatus = false
                } else if (records[i].goodsSellStatus == 0) {
                  records[i].goodsSellStatus = true
                }
              }
              _this.tableData = resp.records;
              _this.total = resp.total
            }
          })
        },

        /* 复选框操作 */
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          console.log(this.multipleSelection)
          this.multipleSelection = val;
          console.log(this.multipleSelection)
        },


        /* 批量删除数据回显 */
        deleteGoodsReview() {
          const _this = this;
          if (this.multipleSelection == null || this.multipleSelection.length === 0) {
            this.$notify({
              title: '警告',
              message: '请先选中商品',
              type: 'warning'
            });
          } else {
            //数据回显
            this.dialogTableData = this.multipleSelection
            this.dialogTableVisible = true

          }
        },

        /* 执行批量删除 */
        deleteGoodsByIds() {
          const _this = this;
          const ids = [];
          for (let i = 0; i < this.multipleSelection.length; i++) {
            ids.push(this.multipleSelection[i].goodsId)
          }
          $.ajax({
            url: "/admin/goods/list",
            type: "DELETE",
            data: {
              "goodsIds": ids
            },
            traditional: true,
            success: function (resp) {
              if (resp.state == 200) {
                _this.$notify({
                  title: '成功',
                  message: resp.message,
                  type: 'success'
                });
                _this.getGoodsInfoByPage(_this.currentPage, 10)
                _this.dialogTableVisible = false
              } else {
                this.$notify.error({
                  title: '警告',
                  message: resp.message,
                });
              }
            }
          })
        },

        /* Switch 选框更改, 将商品下架/上架  */
        changeSwitch(row) {
          const _this = this;
          let goodsSellStatus;
          let goodsCoverImg;
          if (row.goodsSellStatus == true) {
            goodsSellStatus = 0
          } else if (row.goodsSellStatus == false) {
            goodsSellStatus = 1
          }
          $.ajax({
            url: "/admin/goods",
            type: "put",
            data: {
              "goodsId": row.goodsId,
              "goodsName": row.goodsName,
              "goodsIntro": row.goodsIntro,
              "goodsCategoryId": row.goodsCategoryId,
              "goodsCoverImg": row.goodsCoverImg,
              "goodsCarousel": row.goodsCarousel,
              "goodsDetailContent": row.goodsDetailContent,
              "originalPrice": row.originalPrice,
              "sellingPrice": row.sellingPrice,
              "stockNum": row.stockNum,
              "tag": row.tag,
              "goodsSellStatus": goodsSellStatus,
            },
            success: function (resp) {
              if (resp.state == 200 && "up" === resp.message) {
                _this.$notify({
                  title: '成功',
                  message: '商品正在销售',
                  type: 'success'
                });
                _this.getGoodsInfoByPage(_this.currentPage, 10)
              } else if (resp.state == 200 && "down" === resp.message) {
                _this.$notify.info({
                  title: '消息',
                  message: '已将商品停售',
                });
                _this.getGoodsInfoByPage(_this.currentPage, 10)
              }
            }
          })
        },

        /* 打开抽屉: 添加商品 */
        openDrawer(operation) {
          this.addGoodsForm = {
            goodsName: '',
            goodsIntro: '',
            goodsCategoryId: '',
            goodsCoverImg: '',
            originalPrice: 0,
            sellingPrice: 100,
            stockNum: '',
            tag: '',
            goodsSellStatus: false,
          }
          this.drawerOperation = operation
          this.drawer = true
          const _this = this;
          $.ajax({
            url: "/admin/goods/type",
            type: "GET",
            success: function (resp) {
              _this.options = resp;
            }
          })
        },

        /* 打开抽屉: 编辑商品 */
        openEditDrawer(operation,row) {
          console.log(row);
          this.drawerOperation = operation
          this.drawer = true
          this.addGoodsForm = row
          this.sellingPriceMax = row.originalPrice
          const _this = this;
          $.ajax({
            url : "/admin/goods/marks/" + row.originalPrice,
            type : "GET",

            success : function (resp) {
              _this.marks = resp
            }
          })
          $.ajax({
            url: "/admin/goods/type",
            type: "GET",
            success: function (resp) {
              _this.options = resp;
            }
          })
        },

        /* 抽屉关闭前回调的方法  */
        handleClose(done) {
          this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {
              });
        },

        /* 表单(添加商品)提交方法  */
        onSubmit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              console.log(this.addGoodsForm)
              if (this.addGoodsForm.goodsSellStatus == true) {
                this.addGoodsForm.goodsSellStatus = 0
              }
              if (this.addGoodsForm.goodsSellStatus == false) {
                this.addGoodsForm.goodsSellStatus = 1
              }
              const _this = this;
              if (this.drawerOperation === '添加商品'){
                $.ajax({
                  url: "/admin/goods/",
                  type: "POST",
                  data: {
                    "goodsCategoryId": _this.addGoodsForm.goodsCategoryId[_this.addGoodsForm.goodsCategoryId.length - 1],
                    "goodsCoverImg": "/goods-img/" + _this.addGoodsForm.goodsCoverImg,
                    "goodsIntro": _this.addGoodsForm.goodsIntro,
                    "goodsName": _this.addGoodsForm.goodsName,
                    "goodsSellStatus": _this.addGoodsForm.goodsSellStatus,
                    "originalPrice": _this.addGoodsForm.originalPrice,
                    "sellingPrice": _this.addGoodsForm.sellingPrice,
                    "stockNum": _this.addGoodsForm.stockNum,
                    "tag": _this.addGoodsForm.tag,
                  },
                  success: function (resp) {
                    if (resp.state == 200) {
                      _this.$notify({
                        title: '添加成功',
                        message: '已将商品信息保存到服务器',
                        type: 'success'
                      });
                      _this.resetForm('addGoodsForm');
                    } else {
                      _this.$notify.error({
                        title: '添加失败',
                        message: resp.message,
                      });
                    }
                  }
                })
              }else if (this.drawerOperation === '编辑商品'){
                $.ajax({
                  url: "/admin/goods",
                  type: "PUT",
                  data: {
                    "goodsId" : _this.addGoodsForm.goodsId,
                    "goodsCategoryId": _this.addGoodsForm.goodsCategoryId[_this.addGoodsForm.goodsCategoryId.length - 1],
                    "goodsCoverImg": "/goods-img/" + _this.addGoodsForm.goodsCoverImg,
                    "goodsIntro": _this.addGoodsForm.goodsIntro,
                    "goodsName": _this.addGoodsForm.goodsName,
                    "goodsSellStatus": _this.addGoodsForm.goodsSellStatus,
                    "originalPrice": _this.addGoodsForm.originalPrice,
                    "sellingPrice": _this.addGoodsForm.sellingPrice,
                    "stockNum": _this.addGoodsForm.stockNum,
                    "tag": _this.addGoodsForm.tag,
                  },
                  success: function (resp) {
                    if (resp.state == 200) {
                      _this.$notify({
                        title: '修改成功',
                        message: '已更新商品信息',
                        type: 'success'
                      });
                      _this.resetForm('addGoodsForm');
                    } else {
                      _this.$notify.error({
                        title: '修改失败',
                        message: resp.message,
                      });
                    }
                  }
                })

              }
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },


        /* 重置表单 */
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },

        /* 图片上传方法 */
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log("file" + file);
        },
        handleAvatarSuccess(resp, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          //重点  得到上传图片的名字
          this.addGoodsForm.goodsCoverImg = resp.date
        },

        /* 商品价格值改变 */
        originalPriceChange() {
          const _this = this;
          console.log(this.addGoodsForm.originalPrice);
          $.ajax({
            url: "/admin/goods/marks/" + _this.addGoodsForm.originalPrice,
            type: "GET",
            success: function (resp) {
              console.log("marks--------->" + _this.marks)
              console.log("resp------->" + resp)
              _this.sellingPriceMax = _this.addGoodsForm.originalPrice
              _this.addGoodsForm.sellingPrice = _this.addGoodsForm.originalPrice
              _this.marks = resp
            }
          })
        },

        /* 删除商品 */
        deleteGoods(row) {
          const _this = this;
          $.ajax({
            url: "/admin/goods",
            type: "DELETE",
            data: {
              "goodsId": row.goodsId,
            },
            success: function (resp) {
              if (resp.state == 200) {
                _this.$notify({
                  title: '成功',
                  message: resp.message,
                  type: 'success'
                });
                _this.getGoodsInfoByPage(_this.currentPage, 10)
              } else {
                _this.$notify.error({
                  title: '错误',
                  message: resp.message
                });
              }
            }
          })
          console.log(row);
        },

        /* 搜索商品 */
        searchGoods() {
          const _this = this;
          $.ajax({
            url: "/admin/goods/search/" + _this.select + "/" + _this.input,
            type: "GET",
            success: function (resp) {
              const records = resp.date;
              for (let i = 0; i < records.length; i++) {
                // records[i].goodsCoverImg = '<img th:src="../../img/' + img + '" alt="" style="width: 90px; height: 90px; border-radius: 8px">'
                records[i].goodsCoverImg = '<img src="/admin' + records[i].goodsCoverImg + '" alt="" style="width: 90px; height: 90px; border-radius: 8px">';
                records[i].createTime = DateFormat.format(new Date(records[i].createTime), 'yyyy-MM-dd hh:mm:ss');
                records[i].updateTime = DateFormat.format(new Date(records[i].updateTime), 'yyyy-MM-dd hh:mm:ss');
                if (records[i].goodsSellStatus == 1) {
                  records[i].goodsSellStatus = false
                } else if (records[i].goodsSellStatus == 0) {
                  records[i].goodsSellStatus = true
                }
              }
              _this.tableData = resp.date
            }
          })
        },

        /* 批量上架 */
        startSellSelectGoods() {
          //判断当前是否选中商品
          if (this.multipleSelection == null || this.multipleSelection.length === 0) {
            this.$notify({
              title: '警告',
              message: '请先选中商品',
              type: 'warning'
            });
          } else {
            //将选中商品Id封装到数组
            const ids = [];
            for (let i = 0; i < this.multipleSelection.length; i++) {
              ids.push(this.multipleSelection[i].goodsId)
            }
            // 发送请求
            const _this = this;
            $.ajax({
              url: "/admin/goods/status/start",
              type: "PUT",
              data: {
                "goodsIds": ids
              },
              traditional: true,
              success: function (resp) {
                if (resp.state == 200) {
                  _this.$notify({
                    title: '成功',
                    message: '选中商品状态已转为在售',
                    type: 'success'
                  });
                  _this.getGoodsInfoByPage(_this.currentPage, 10)
                } else {
                  _this.$notify.error({
                    title: '错误',
                    message: '服务器错误, 请稍后重试',
                  });
                }
              }
          }
        )
      }
    },

        /* 批量下架 */
        stopSellSelectGoods(){
          //判断当前是否选中商品
          if (this.multipleSelection == null || this.multipleSelection.length === 0) {
            this.$notify({
              title: '警告',
              message: '请先选中商品',
              type: 'warning'
            });
          } else {
            //将选中商品Id封装到数组
            const ids = [];
            for (let i = 0; i < this.multipleSelection.length; i++) {
              ids.push(this.multipleSelection[i].goodsId)
            }
            // 发送请求
            const _this = this;
            $.ajax({
                  url: "/admin/goods/status/stop",
                  type: "PUT",
                  data: {
                    "goodsIds": ids
                  },
                  traditional: true,
                  success: function (resp) {
                    if (resp.state == 200) {
                      _this.$notify({
                        title: '成功',
                        message: '选中商品状态已转为停售',
                        type: 'success'
                      });
                      _this.getGoodsInfoByPage(_this.currentPage, 10)
                    } else {
                      _this.$notify.error({
                        title: '错误',
                        message: '服务器错误, 请稍后重试',
                      });
                    }
                  }
                }
            )
          }

        }

    },
    mounted: function () {
      this.getGoodsInfoByPage(1, 10)
      this.tableHeight = window.innerHeight - 200;
      /*const goodsIds = [10004,10005,10006]
      this.getGoodsInfoByIds(goodsIds)*/
    }
    })
  </script>
</body>
</html>